<template>
  <div>
    <h1>Post List</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  metaInfo: {
    title: "Posts",
  },
  data() {
    return {};
  },
  computed: {
    ...mapState(["posts"]),
  },
  // Vue SSR 特殊为服务端渲染提供的一个声明周期钩子函数
  // 它会在进行渲染之前进行调用
  serverPrefetch() {
    // 发起 action , 返回promise
    return this.getPosts();
  },
  methods: {
    ...mapActions(["getPosts"]),
  },
};
</script>
<style scoped></style>
